<template>
  <div class="nameEditAdd">
    <!-- 新增修改名称弹窗组件 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :title="text"
      destroy-on-close
      :close-on-click-modal="false"
      @open="openDialog"
      @close="closeDailog"
    >
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
            <el-form-item prop="skillNo" label="技能编号">
              <el-input v-model="formData.skillNo" :placeholder="`请输入技能编号`" clearable />
            </el-form-item>
            <el-form-item prop="skillName" :label="labels">
              <el-input v-model="formData.skillName" :placeholder="`请输入${labels}`" clearable />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <Button :loading="loading" @click="closeDailog">取消</Button>
        <Button type="primary" :loading="loading" @click="confrim('form')">确定</Button>
      </span>
    </el-dialog>
    <Button :loading="loading" type="primary" @click="showClick">{{ text }}</Button>
  </div>
</template>
<script>
import Button from '@/components/Button'
export default {
  name: 'SkillEditAdd',
  components: {
    Button
  },
  props: {
    skillInfo: {
      type: Array,
      default: () => {
        return []
      }
    },
    text: {
      type: String,
      default: '1'
    },
    type: {
      type: String,
      default: '1'
    },
    labels: {
      type: String,
      default: '业务组名称'
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      formData: {
        id: '',
        skillName: '',
        skillNo: '',
        createBy: '',
        createTime: '',
        createrName: ''
      },
      formRules: {
        skillNo: [
          { required: true, message: '请输入技能编号', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '编码为纯数字', trigger: 'blur' }
        ],
        skillName: [
          { required: true, message: '请输入技能名称', trigger: 'blur' }
        ]
      },
      selectedAry: []
    }
  },
  created() {
  },
  methods: {
    // 打开编辑框
    showClick() {
      if (Number(this.type) === 2) {
        if (this.skillInfo.length === 0) {
          this.$message({
            message: '请选择需要编辑的数据',
            type: 'warning'
          })
          return
        }
      }
      this.dialogVisible = true
    },
    /**
     * 开发Dialog时执行
     */
    openDialog() {
      if (Number(this.type) === 1) {
        Object.keys(this.formData).forEach(k => {
          this.$set(this.formData, k, '')
        })
      }
      if (Number(this.type) === 2) {
        const skillInfo = this.skillInfo[0]
        Object.keys(this.formData).forEach(k => {
          this.$set(this.formData, k, skillInfo[k])
        })
      }
    },
    /**
     * 关闭Diglog时执行
     */
    closeDailog() {
      if (Number(this.type) === 1) {
        Object.keys(this.formData).forEach(k => {
          this.$set(this.formData, k, '')
        })
      }
      this.selectedAry = []
      this.dialogVisible = false
    },
    // 确定
    confrim(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = { ...this.formData }
          this.$emit('confrim', formData)
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.buttons-center {
  display: flex;
  margin-bottom: 20px;
  i {
    flex-grow: 1;
  }
}
.nameEditAdd {
  /deep/ .el-select {
    width: 100%;
  }
}
</style>
